<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <canvas id="canvas" style="display: block;margin: 0 auto;border: 1px solid #aaa;">
        您的浏览器不支持canvas
    </canvas>
    <button id="big">点击放大</button>
    <button id="small">点击缩小</button>
    <button id="rotate">旋转</button>
    <script>
        var canvas = document.getElementById("canvas")
        var context = canvas.getContext("2d")
        var img = new Image()

        var big = document.getElementById("big")
        var small = document.getElementById("small")
        var scale = 1

        var rotate = 0

        var curentPoint = {
            x: 0,
            y: 0
        }

        var lastPoint = {
            x: 0,
            y: 0,
            imageWidth: canvas.width,
            imageHeight: canvas.height
        }

        var otherPoint = {
            x: 0,
            y: 0,
            imageWidth: 0,
            imageHeight: 0,
            rotate: 0
         }

        var dragge = false

        window.onload = function() {
            canvas.width = 1366
            canvas.height = 768

            document.getElementById("big").addEventListener("click", function() {
                scale += 0.2
                drawImageByScale(scale)
                // scaleByApi(scale)
            })

            document.getElementById("small").addEventListener("click", function() {
                scale -= 0.2
                drawImageByScale(scale)
                // scaleByApi(scale)
            })

            document.getElementById("rotate").addEventListener("click", function() {
                context.clearRect(0, 0, canvas.width, canvas.height)
                context.save()
                context.translate(canvas.width/2, canvas.height/2)
                if (rotate === 0) {
                    rotate = -Math.PI / 2
                } else if ( rotate == -Math.PI / 2) {
                    rotate = -Math.PI
                }else if ( rotate == -Math.PI) {
                    rotate = Math.PI/2
                }else if ( rotate == Math.PI/2) {
                    rotate = 0
                }
                console.log(rotate)
                context.rotate(rotate)
                context.drawImage(img, -canvas.width/2, -canvas.height/2)
                
                console.log("rotate", -canvas.width/2, -canvas.height/2)
                context.restore()
                
            })
            
            img.src ="./assets/2.jpg"

            // 1366 * 768
            img.onload = function () {
               drawImageByScale(scale)
            }

        }

        canvas.onmousedown = function (e) {
            // console.log("onmousedown")
            lastPoint = Object.assign({}, otherPoint)
            e.preventDefault();
            // context.save()
            // context.restore()
            dragge = true
        }

        canvas.onmouseup = function(e) {
            var point =  windowToCanvas(e.clientX, e.clientY)
            lastPoint = Object.assign({}, otherPoint)
            console.log("up", lastPoint)
            dragge = false
            // context.save()
        }

        canvas.onmousemove = function (e) {
            if (dragge) {
                context.save()
                var point = windowToCanvas(e.clientX, e.clientY)
                let px = point.x - curentPoint.x
                let py = point.y- curentPoint.y 
                context.clearRect(0, 0, canvas.width, canvas.height);
                context.drawImage(img, lastPoint.x + px, lastPoint.y + py, lastPoint.imageWidth, lastPoint.imageHeight)
                otherPoint = {
                    x: lastPoint.x + px,
                    y: lastPoint.y + py,
                    imageWidth: lastPoint.imageWidth,
                    imageHeight: lastPoint.imageHeight
                }
                context.restore()
            }
        }
        
        
        // 基于中心点的 图片放大缩小
        function drawImageByScale(scale) { 
            var imageWidth = 1366 * scale
            var imageHeight = 768 * scale

            var dx = canvas.width/2 - imageWidth/2
            var dy = canvas.height/2 - imageHeight/2
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.drawImage(img, lastPoint.x + dx, lastPoint.y + dy, imageWidth, imageHeight)
            otherPoint = {
                x: lastPoint.x + dx,
                y: lastPoint.y + dy,
                imageWidth,
                imageHeight
            }
            context.save()
        }

        // 使用原生放大缩小接口 图片放大缩小
        function scaleByApi(scale) {
            context.save()
            context.clearRect(0, 0, canvas.width, canvas.height)
            context.scale(scale, scale)
            context.drawImage(img, 0, 0)
            context.restore()
        }
        

        // 计算点击位置距离canvas画布的距离
        function windowToCanvas(x, y) {
            var bbox = canvas.getBoundingClientRect()
            return {
                x: x - bbox.left,
                y: y-bbox.top
            }
        }

    </script>
</body>
</html>